<template>
	<view class="bind-id-card">
		<g-navbar title="实名认证" />
		<view class="main">
			<view class="input-module-wrapper">
				<view class="input-item">
					<view class="label">
						真实姓名
					</view>
					<view class="input-wrapper">
						<g-input type="other" inputType="text" placeholder="请输入真实姓名" v-model="formData.true_name" />
					</view>
				</view>
				<view class="input-item">
					<view class="label">
						身份证号
					</view>
					<view class="input-wrapper">
						<g-input type="other" inputType="text" placeholder="请输入身份证号" v-model="formData.id_card_no"
							:maxLength="18" />
					</view>
				</view>
			</view>
			<view class="idcard-photo-module">
				<view class="title-wrapper">
					<view class="title">
						身份信息
					</view>
					<view class="desc">
						(仅认证不对外展示）
					</view>
				</view>
				<view class="upload-wrapper">
					<uploadPhoto v-model="formData.id_card_front" :cover="COVER_TYPE.IDCARD_FRONT" label="身份证（人像）" />
					<uploadPhoto v-model="formData.id_card_reverse" :cover="COVER_TYPE.IDCARD_REVERSE"
						label="身份证（国徽）" />
				</view>

			</view>
			<view class="hold-idcard-module">
				<view class="title-wrapper">
					<view class="title">
						手持身份证
					</view>
					<view class="desc">
						(仅认证不对外展示）
					</view>
				</view>
				<view class="upload-wrapper">
					<uploadPhoto v-model="formData.id_card_in_hand" :cover="COVER_TYPE.IDCARD_HOLD" />
				</view>
			</view>
		</view>
		<!-- <view class="btn-wrapper"> -->
		<g-button btn_text="确定" :width="686" :height="104" :disabled="isBtnDisabled" style="margin-top: 100rpx;"
			@click="bind" />
		<!-- </view> -->
	</view>
</template>

<script lang="ts" setup>
	import uploadPhoto from './components/uploadPhoto/uploadPhoto.vue';
	import { COVER_TYPE } from "./components/uploadPhoto/types";
	import { computed, reactive } from "vue";
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { ROUTE_TYPE } from '@/enum/router';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	interface IFromData {
		customer_id : number,
		id_card_front : string,
		id_card_reverse : string,
		id_card_in_hand : string,
		true_name : string,
		id_card_no : string;
	}

	const formData : IFromData = reactive({
		customer_id: store.getters[GET_STORE_USERINFO].id,
		id_card_front: '',
		id_card_reverse: '',
		id_card_in_hand: '',
		true_name: '',
		id_card_no: ''
	})

	const isBtnDisabled = computed(() => {
		return !formData.id_card_front.length || !formData.id_card_reverse.length || !formData.id_card_in_hand.length || !formData.true_name.length || formData.id_card_no.length < 18
	})



	const bind = async () : Promise<void> => {
		await uni.http.POST(REST_URL.bindIdCard, formData);
		// uni.navigateBack({
		// 	success: () => {
		// 		uni.prompt.$showToast('上传个人信息成功，待审核通过', 5000);
		// 		// uni.$emit('updateCardPackList')
		// 	},
		// 	fail: () => {
		// 		uni.prompt.$showToast('上传个人信息成功，待审核通过', 5000);
		// 	}
		// })
		uni.router.route({
			url: '/pages_bind/card_pack/cardPack',
			type: ROUTE_TYPE.REDIRECTTO,
			success: () => {
				uni.prompt.$showToast('上传个人信息成功，待审核通过', 5000);
				uni.$emit('updateCardPackList')
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./bindIdCard.scss";
</style>